<template>
	<view class="switch"
		:class="[type == 'darkness' ? 'darkness' : '', botton ? 'botton' : '', type == 'darkness' && botton ? 'darkClass' : '']"
		@click="click">
		<svg class="switch-h" viewBox="0 0 24 24" width="24px" height="24px" aria-hidden="true">
			<g stroke="currentColor" stroke-width="2" stroke-linecap="round">
				<polyline points="12,1 12,10" />
				<circle fill="none" cx="12" cy="13" r="9" stroke-dasharray="49.48 7.07" stroke-dashoffset="10.6" />
			</g>
		</svg>
	</view>
</template>
<script>
	/**
	 * @description 阿里矢量图
	 * @example <h-switch-button></h-switch-button>
	 * 
	 * @property {String}			type				开关模式 （白色模式-white、暗黑模式-darkness）（默认 -white ）
	 * 
	 * @event {Function} active			点击开关时触发
	 */

	export default {
		// 小程序样式穿透
		options: {
			styleIsolation: 'shared'
		},
		props: {
			// 开关模式（白色模式-white、暗黑模式-darkness）
			type: {
				type: String,
				default: 'white'
			}
		},
		data() {
			return {
				botton: false,
			}
		},
		methods: {
			click() {
				this.botton = !this.botton
				this.$emit('active', this.botton)
			}
		}
	}
</script>
<style lang="scss" scoped>
	$light2: 60%;
	$hue: 223;
	$sat: 10%;
	$hue2: 223;
	$sat2: 90%;
	$light2: 60%;
	$primary: hsl($hue2, $sat2, $light2);
	$trans-dur: 0.3s;
	$trans-timing: ease-in-out;
	$trans-timing2: cubic-bezier(0.42, -1.84, 0.42, 1.84);
	$trans-timing3: cubic-bezier(0.42, 0, 0.42, 1.84);

	.switch {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 260rpx;
		height: 260rpx;
		background: #ffffff;
		border-radius: 50%;
		background-color: transparent;
		background-image: linear-gradient(hsl($hue, $sat, 80%), hsl($hue, $sat, 85%));
		box-shadow: 0 0 0 0.125em hsla($hue2, $sat2, 50%, 0), 0 0 0.25em hsl($hue, $sat, 55%) inset, 0 0.125em 0.125em hsl($hue, $sat, 90%);
		cursor: pointer;
		outline: transparent;
		position: relative;
		transition: box-shadow $trans-dur $trans-timing;
		-webkit-tap-highlight-color: transparent;
	}

	.switch:before {
		background-image: linear-gradient(hsl($hue, $sat, 90%), hsl($hue, $sat, 80%));
		box-shadow: 0 0.75em 0.75em 0.25em hsla($hue, 0%, 0%, 0.3);
		top: 40rpx;
		left: 40rpx;
		width: 180rpx;
		height: 180rpx;
		transition: box-shadow $trans-dur $trans-timing2, transform $trans-dur $trans-timing2;
	}

	.switch:after {
		background-color: hsl($hue, $sat, 75%);
		background-image: linear-gradient(hsla($hue, $sat, 90%, 0), hsl($hue, $sat, 90%));
		box-shadow: 0 0.0625em 0 hsl($hue, $sat, 90%) inset, 0 -0.0625em 0 hsl($hue, $sat, 90%) inset, 0 0 0 0 hsla($hue2, $sat2, $light2, 0.1) inset;
		top: 70rpx;
		left: 70rpx;
		width: 120rpx;
		height: 120rpx;
		transition: background-color $trans-dur $trans-timing, box-shadow $trans-dur $trans-timing, transform $trans-dur $trans-timing2;
	}


	.switch:before,
	.switch:after {
		border-radius: inherit;
		content: "";
		display: block;
		position: absolute;
	}

	.switch-h {
		position: absolute;
		top: calc(50% - 20rpx);
		left: calc(50% - 20rpx);
		width: 40rpx;
		height: 40rpx;
		transition: filter $trans-dur $trans-timing;
		z-index: 1;
	}

	.switch-h g {
		stroke: hsl($hue, $sat, 70%);
		transition: stroke $trans-dur $trans-timing;
	}

	.darkness {
		background-image: linear-gradient(hsl($hue, $sat, 10%), hsl($hue, $sat, 15%));
		box-shadow: 0 0 0 0.125em hsla($hue2, $sat2, 50%, 0), 0 0 0.25em hsl($hue, $sat, 5%) inset, 0 0.125em 0.125em hsl($hue, $sat, 25%);

		&:before {
			background-image: linear-gradient(hsl($hue, $sat, 20%), hsl($hue, $sat, 10%));
			box-shadow: 0 0.75em 0.75em em 0.25em hsla($hue, 0%, 0%, 0.7);
		}

		&:after {
			background-color: hsl($hue, $sat, 10%);
			background-image: linear-gradient(hsla($hue, $sat, 20%, 0), hsl($hue, $sat, 20%));
			box-shadow: 0 0.0625em 0 hsl($hue, $sat, 25%) inset, 0 -0.0625em 0 hsl($hue, $sat, 25%) inset, 0 0 0 0 hsla($hue2, $sat2, $light2, 0.1) inset;
		}

		.switch-h g {
			stroke: hsl($hue, $sat, 5%);
		}
	}

	.botton {
		&:before {
			box-shadow: 0 0.375em 0.375em 0 hsla($hue, 0%, 0%, 0.3);
			transition-timing-function: $trans-timing3;
		}

		&:before,
		&:after,
		.switch-h {
			transform: scale(0.98);
		}

		.switch-h {
			filter: drop-shadow(0 0 0.25em $primary);
		}

		.switch-h g {
			stroke: $primary;
		}

		&:after {
			background-color: hsl($hue, $sat, 90%);
			box-shadow: 0 0.0625em 0 hsla($hue2, $sat2, $light2, 0.5) inset, 0 -0.0625em 0 hsla($hue2, $sat2, $light2, 0.5) inset, 0 0 0.75em 0.25em hsla($hue2, $sat2, $light2, 0.1) inset;
			transition-timing-function: $trans-timing, $trans-timing, $trans-timing3;
		}
	}

	.darkClass {
		&:before {
			box-shadow: 0 0.375em 0.375em 0 hsla($hue, 0%, 0%, 0.7);
		}

		&:after {
			background-color: hsl($hue, $sat, 20%);
			box-shadow: 0 0.0625em 0 hsla($hue2, $sat2, $light2, 0.5) inset, 0 -0.0625em 0 hsla($hue2, $sat2, $light2, 0.5) inset, 0 0 0.75em 0.25em hsla($hue2, $sat2, $light2, 0.1) inset;
		}
	}
</style>